<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新经资讯后台管理</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
    <link rel="stylesheet" href="../../static/admin/css/jquery.pagination.css">
    <script type="text/javascript" src="../../static/admin/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../static/admin/js/jquery.pagination.min.js"></script>
</head>
<body>
    <div class="breadcrub">
            当前位置：用户管理>用户列表
        </div>

        <div class="pannel">
            <table class="common_table">
                <tr>
                    <th>用户名</th>
                    <th>电话</th>
                    <th>注册时间</th>
                    <th>上次登录时间</th>
                </tr>
                <!-- 遍历用户对象, 并把需要的数据显示 -->
                {% for user in data.users %}
                <tr>
                    <td>{{ user.nick_name }}</td>
                    <td>{{ user.mobile }}</td>
                    <td>{{ user.register }}</td>
                    <td>{{ user.last_login }}</td>
                </tr>
                {% endfor %}
            </table>
        </div>

        <div class="box">
            <div id="pagination" class="page"></div>
        </div>

    <script>
        $(function() {
            //  Jquery的Pagination是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了
            $("#pagination").pagination({
                //  //分布总数量和页数，必须参数
                currentPage: {{ data.current_page }},
                totalPage: {{ data.total_page }},
                // 回调函数
                callback: function(current) {  // function() 为翻页调用次函数。
                    // 请求下一页数据url
                    // 点击那一页current就代表当前页（get）
                    window.location.href = '/admin/user_list?p=' + current
                }
            });
        });
    </script>
</body>
</html>